.fs-checkbox-group {
  display: inline-block;
  margin-right: 10px;

  &.is-disabled {
    cursor: not-allowed;
  }
}

.fs-checkbox {
  padding: 5px;
  display: inline-block;

  &--wrapper {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 5px;
    vertical-align: middle;

    .fs-checkbox--input {
      visibility: hidden;
      display: none;
    }

    .fs-checkbox--checkbox {
      cursor: pointer;
      position: relative;
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      background-color: #eeeeee;
    }

    .fs-checkbox--checkbox::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 7px;
      width: 7px;
      height: 12px;
      border-bottom: 4px solid #323232;
      border-right: 4px solid #323232;
      transform: rotate(45deg);
      opacity: 0;
    }

    .fs-checkbox--checkbox::before {
      content: '';
      position: absolute;
      top: 11px;
      left: 6px;
      width: 14px;
      height: 0px;
      border-bottom: 4px solid #323232;
      opacity: 0;
    }

    .fs-checkbox--input:checked+.fs-checkbox--checkbox::after {
      opacity: 1;
    }

    .fs-checkbox--input:indeterminate+.fs-checkbox--checkbox::before {
      opacity: 1;
    }
  }

  &--label {
    cursor: pointer;
    vertical-align: middle;
  }

  &#{&}--row {
    display: inline-block;
  }

  &#{&}--column {
    display: block;
  }

  &.is-disabled .fs-checkbox--checkbox,
  &.is-disabled &--label,
  &.is-disabled {
    cursor: not-allowed;
  }
}